<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="70%">
    <PageWrapper contentFullHeight fixedHeight dense>
      <AdVxeTable @register="registerTable" size="small" />
    </PageWrapper>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';

  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { PageWrapper } from '@/components/Page';
  import { AdVxeTable, useAdVxeTable } from '@/components/AdVxeTable';

  import { userFunctionColumns } from './user.data';

  import { request } from '@/utils/request/axios';
  import { ErrorMessageMode, PageRequest, PageData } from '#/request';
  import { FunctionOutputDtoSimple } from '@/api/authorization/admin/function/model';
  import { Api } from '@/api/authorization/admin/userfunction';

  defineOptions({ name: 'UserFunctionDrawer' });

  const { t } = useI18n();
  const userIdRef = ref<string>('0');

  const [registerTable, { reload }] = useAdVxeTable({
    id: 'system-user-function-drawer-table',
    // 表标题呈现器
    title: t('routes.system.identity.user.userFunctionList'),
    // 表格数据接口请求对象
    api: readUserFunctions,
    // 表单列信息 BasicColumn[]
    columns: userFunctionColumns,
    // 使用搜索表单
    searchForm: true,
    // 是否带有边框 boolean | default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
    border: false,
    // 是否显示序号列
    showSeqColumn: true,
  });

  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    setDrawerProps({ destroyOnClose: true, confirmLoading: false });
    userIdRef.value = '0';
    if (data.userId) {
      userIdRef.value = data.userId as string;
    }
    await reload();
  });

  //#region 读取用户功能信息
  /**
   * 读取用户功能信息
   * @param params 分页请求
   * @param mode 错误消息模型
   */
  function readUserFunctions(params: PageRequest, mode: ErrorMessageMode = 'message') {
    return request.post<PageData<FunctionOutputDtoSimple>>(
      {
        url: `${Api.ReadFunctions}?userId=${userIdRef.value}`,
        params: params,
      },
      {
        errorMessageMode: mode,
      },
    );
  }
  //#endregion
</script>
